import React from 'react'
/**
 * 一、ReactRouterDOM6配置的步骤
 * 1、下载依赖包:yarn add react-router-dom
 * 2、在index.js文件中使用<BrowserRouter>将<App>节点包裹起来
 *  BrowseRouter:采用的路由模式是history
 *  HashRouter:路由hash模式
 * 3、在App.js中进行路由配置
 * 1）创建若干个页面组件
 * 2) 进行以及路由配置
 * Routes:进行配置集合组件
 * Route:路由配置对象组件,常用属性
 *   path:路由路径，必须以/开头
 *   element:路由配对应的页面组件
 * 二、路由的跳转方式有两种
 * 1、声明式跳转方式：使用Link组件完成跳转，这个Link组件最后编译成超链接标签
 * 2、编程式跳转方式：使用v6版本的相关的hook来完成跳转
 *  第1步：从react-router-dom包中导入useNavigate
 *  第2步: 在函数组件中进行调用
 */
import {Route, Routes,Navigate} from 'react-router-dom'
import HotNews from './views/HotNews'
import SportsNews from './views/SportsNews'
import DomesticNews from './views/DomesticNews'
import WorldNews from './views/WorldNews'

import LocalHotNews from './views/hot/LocalHotNews'
import CarHotNews from './views/hot/CarHotNews'
import VedioNews from './views/hot/VedioNews'
import TravalHotNews from './views/hot/TravalHotNews'
import NotFound from './NotFound'
import SportsNewsDetail from './views/SportsNewsDetail'
import DomesticNewsDetail from './views/DomesticNewsDetail'

import Header from './Header'


import './app.css'
export default function App() {
  return (
    <div className='container'>
      <Header></Header>
      <Routes>
        {/* <Route index element={<Navigate to="world"></Navigate>}></Route> */}
        <Route path='/hot' element={<HotNews/>}>
            {/* 默认路由配置 */}
            <Route index element={<Navigate to="local"></Navigate>}></Route>
            <Route path="local" element={<LocalHotNews></LocalHotNews>}></Route>
            <Route path='car' element={<CarHotNews></CarHotNews>}></Route>
            <Route path='vedio' element={<VedioNews></VedioNews>}></Route>
            <Route path='traval' element={<TravalHotNews></TravalHotNews>}></Route>
        </Route>
        <Route path='/sports' element={<SportsNews/>}></Route>
        <Route path='/sportsDetail' element={<SportsNewsDetail></SportsNewsDetail>}></Route>
        <Route path='/domestic' element={<DomesticNews/>}></Route>
        <Route path='/domesticDetail/:id' element={<DomesticNewsDetail></DomesticNewsDetail>}></Route>
        <Route path="/world" element={<WorldNews/>}></Route>
        <Route path='*' element={<NotFound></NotFound>}></Route>
     </Routes>
    </div>
  )
}
